<template>
	<view class="container">
		<!--    <productConSwiper :imgUrls="imgUrls"></productConSwiper>-->
		<view class="swiper banner" >
			<!-- /:autoplay="true" -->
			<swiper indicator-dots="true"  :circular="circular" :interval="interval"
				:duration="duration" :autoplay="autoplay" indicator-color="#E4E4E4" indicator-active-color="#E93323" :current="swiperCur"
				@change="swiperChange">
				<block v-if="bannerImgs.length">
					<block v-for="(item, index) in bannerImgs" :key="index">
						<swiper-item :class="{ active: index == swiperCur }">
							<image :src="item" class="slide-image" mode="aspectFill"></image>
						</swiper-item>
					</block>
				</block>
				<block v-if="bannersVideos.length">
					<swiper-item v-for="(item, index) in bannersVideos">
						<video
							:src="item"
							controls></video>
					</swiper-item>
				</block>

			</swiper>
			<view class="current-box">
				{{current>bannerImgs.length?'视频':'图片'}}{{current}}/{{bannersVideos.length+bannerImgs.length}}
			</view>
		</view>

		<view class="info">
			<view>
				<view class="name">{{ detail.title }}</view>
				<view class="desc">{{detail.remark}}</view>
				<view class="price">
					免费
				</view>
			</view>


		</view>
		<view class="card-box">
			<view class="attribute acea-row row-between-wrapper">
				<view class="acea-row row-between-wrapper">
					<text>开放时间</text>
					<text class="atterTxt"  v-if="detail.is_open == '1'">{{ detail.show_date }}</text>
					<text class="atterTxt"  v-if="detail.is_open == '0'">暂未开放</text>
				</view>
			</view>
			<view class="attribute acea-row row-between-wrapper">
				<view class="acea-row row-between-wrapper">
					<text>景区地址</text>
					<text class="atterTxt">{{ detail.address }}</text>
				</view>
			</view>
		</view>


		<view class="card-box">
			<!-- 演出购票 -->
			<template v-if="type == '1'">
				<view class="notice-title">演出详情</view>
			</template>
			<!-- 展出预约 -->
			<template v-else>
				<view class="notice-title">游客预约须知：</view>
			</template>
			<view class="content" v-if="detail.content">
				<jyf-parser :domain="domain" :html="detail.content" ref="article"
					:tag-style="tagStyle"></jyf-parser>
			</view>
		</view>


		<view style="height: 80px; " v-if="showBuy && detail.is_open == '1'"></view>
		<view class="bnt acea-row fixed-bottom" v-if="showBuy && detail.is_open == '1'">
			<view class="buy btns bgcor" @click="onSubmit">开始预约</view>
		</view>
		
		<uni-popup ref="popup" class="popup-cls">
			<view class="pop-info">
				<view class="pop-top">
					游客预约须知
				</view>
				<view class="center">
					<scroll-view class="pop-content" scroll-y="true">
						已完成游客预约须知阅读
					</scroll-view>
				</view>
				<view class="bottom">
					<view class="agree-btn" @click="agreeProtocol">已阅读游客预约须知并同意</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import productConSwiper from "@/components/productConSwiper/index.vue";
	import {
		HTTP_REQUEST_URL
	} from "@/config/app";
	import {
		performInfo
	} from "@/api/2_activity";
	const app = getApp();
	export default {
		components: {
			productConSwiper
		},
		data() {
			return {
				id: '',
				imgUrls: [],
				domain: HTTP_REQUEST_URL,
				description: '',
				tagStyle: {
					img: "width:100%;display:block;",
				},
				detail: {},
				swiperCur: 0,
				circular: true,
				autoplay: true,
				interval: 3000,
				duration: 500,
				current: 1,
				type:1,
				showBuy: app.globalData.temp_status != 1
			};
		},
		computed: {
			bannersVideos() {
				if (JSON.stringify(this.detail) != '{}') {
					if (this.detail.video) {
						return [this.detail.video]
					}
				}
				return []
			},
			bannerImgs() {
				if (JSON.stringify(this.detail) != '{}') {
					let bs = this.detail.banner.split(",")
					return bs
				}
				return []

			}
		},
		onLoad(options) {
			this.id = options.id
			
			performInfo(this.id).then(res => {
				this.detail = res.data
				this.type = this.detail.type;
			})
		},
		methods: {
			swiperChange(e) {
				this.current = e.detail.current + 1
			},
			onSubmit() {
				this.$refs.popup.open('center');
			},
			agreeProtocol(){
				uni.navigateTo({
					url: `/pages/2_development/scenic/selectdate?id=${this.id}&title=${this.detail.title}&remark=${this.detail.remark}&start_time=${this.detail.start_time}`
				})
				this.$refs.popup.close()
			}
		}
	};
</script>

<style lang="scss">
	@import "../../index/style/main.scss";

	.container {
		background-color: #F5F5F5;
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);  
		padding-bottom: env(safe-area-inset-bottom); 
	}

	.banner {
		height: 213px;
		width: 100%;
		position: relative;

		swiper {
			height: 100%;
			width: 100%;

			image,
			video {
				width: 100%;
				height: 100%;
			}

		}

		.current-box {
			position: absolute;
			right: 20rpx;
			bottom: 20rpx;
			background: rgba(0, 0, 0, .24);
			color: #fff;
			border-radius: 30px;
			padding: 2px 6px;
			font-size: 12px;
		}

	}

	.bnt {
		margin: 30rpx;
		padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
	}

	.btns {
		text-align: center;
		line-height: 76rpx;
		color: #fff;
		font-size: 28rpx;
	}
	.bgcor{
		background-color:#0193ff;
	}

	.joinCart {
		flex: 1;
		border-radius: 50rpx 0 0 50rpx;
		background-image: linear-gradient(to right, #fea10f 0%, #fa8013 100%);
	}

	.buy {
		flex: 1;

		border-radius: 50rpx;
		// background-image: linear-gradient(to right, #fa6514 0%, #e93323 100%);
	}

	.users {
		padding-left: 30rpx;
		flex-wrap: wrap;
		/* #ifdef MP */
		margin-top: 0;
		/* #endif */
		/* #ifdef H5 */
		margin-top: 0;

		/* #endif */
		.avatar {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 30%;
			margin-right: 3%;
			margin-top: 20rpx;

			height: 80rpx;
			width: 80rpx;
			border-radius: 40rpx;
			background: #eee;

			&.active {
				background: #999;
				color: #fff;
			}
		}
	}

	.attribute {
		background-color: #fff;
		padding: 0 30rpx;
		font-size: 26rpx;
		color: #82848f;
		height: 90rpx;
		position: relative;
	}

	.atterTxt {
		font-size: 28rpx;
		color: #282828;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		display: inline-block;
		// width: 400rpx;
		margin-left: 20rpx;
	}


	.info {
		position: relative;
		background: #fff;
		padding: 20rpx 0;

		.name {
			margin: 20rpx 30rpx 0;
			font-size: 32rpx;
			font-weight: 700;
		}

		.price {
			margin: 20rpx;
			margin-left: 30rpx;
			color: red;
			font-size: 28rpx;
		}

		.score {
			height: 50rpx;
		}

		.desc {
			margin: 0 30rpx;
			font-size: 26rpx;
			color: #82848f;
			margin-top: 10rpx;
		}

		.shoucang {
			font-size: 18rpx;
			text-align: center;
			color: #666;
			position: absolute;
			top: 10rpx;
			right: 30rpx;
		}
	}

	.card-box {
		background-color: #fff;
		margin-top: 20rpx;

		.acea-row {
			display: flex;
			justify-content: space-between;
			width: 100%;

			.atterTxt {
				flex: 1;
				padding: 20rpx 0;
				text-align: right;
			}
		}
	}

	.notice-title {
		font-size: 28rpx;
		color: #333;
		// margin: 30rpx;
		padding: 30rpx;
		font-weight: bold;


	}

	.content {
		margin: 0 30rpx;
		padding: 0rpx 0rpx 40rpx 0rpx;
	}
	
	
	/****/
	
	.popup-cls{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	
	.pop-info{
		width:90%;
		background-color: white;
		display: flex;
		flex-direction: column;
		border-radius: 20rpx;
		margin: 0 auto;
	}
	.pop-top{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #000000;
		font-weight: bold;
		margin-top: 20rpx;
		text-align: center;
		height: 40rpx;
	}
	
	.center{
		height: 200rpx;
		width:90%;
		margin: 30rpx;
	}
	.pop-content{
		height: 200rpx;
		font-size: 28rpx;
		color: #000000;
		text-align: center;
	}
	.bottom{
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	.agree-btn{
		flex: 1;
		margin-left: 40rpx;
		margin-right: 40rpx;
		height:80rpx;
		background-color: #01A1ED;
		border-radius: 40rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 80rpx;
		margin-bottom: 30rpx;
	}
</style>
